<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天系统</title>
</head>
<body>
    <div id="communication" class="left">
        <ul v-for="talk in talks" >
            <li>{{talk.date}}</li>
            <li>{{talk.context}}</li>
        </ul>
    </div>
<div id="communication2" class="right">
    <ul v-for="talk in talks" >
        <li>{{talk.date}}</li>
        <li>{{talk.context}}</li>
    </ul>
    <form>
        <textarea id="newContext" ></textarea>
        <input type="button" value="发送消息" onclick="addTalk()">
    </form>
</div>
</body>
</html>

<style type="text/css">
    body,html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .left,
    .right {
        float: left;
        width: 50%;
        height: 100%;
    }
</style>

<script src="../js/vue.js"></script>
<script src="../js/ajax.js"></script>

<script>
    window.onload=function start(){
        getData();
        get_rightData();
    }

    function getData(){
    let target_name=window.localStorage.getItem("targetName");
    let user_name=window.localStorage.getItem("loginName");
        new Vue({
            el:"#communication",
            data(){
                return{
                    talks:[]
                }
            },
            mounted(){
                let _this=this;
                ajax({
                    method:"post",
                    url:"../../talk",
                    data:{
                        userName:user_name,
                        targetName:target_name,
                        code:2
                    },
                    success:function (result){
                        console.log(result);
                        _this.talks=result;
                    },
                    error:function (result) {
                        console.log(result);
                    }

                })
            }
        })
    }

    function get_rightData(){
        let target_name=window.localStorage.getItem("targetName");
        let user_name=window.localStorage.getItem("loginName");
        new Vue({
            el:"#communication2",
            data(){
                return{
                    talks:[]
                }
            },
            mounted(){
                let _this=this;
                ajax({
                    method:"post",
                    url:"../../talk",
                    data:{
                        userName:user_name,
                        targetName:target_name,
                        code:0
                    },
                    success:function (result){
                        console.log(result);
                        _this.talks=result;
                    },
                    error:function (result) {
                        console.log(result);
                    }

                })
            }
        })
    }

    function addTalk() {
        let target_name = window.localStorage.getItem("targetName");
        let user_name = window.localStorage.getItem("loginName");
        let newContext = document.getElementById("newContext").value;
        ajax({
            method: "post",
            url: "../../talk",
            data: {
                userName: user_name,
                targetName: target_name,
                context: newContext,
                code: 1
            },
            success: function (result) {
                console.log(result);
                location.reload();
            },
            error: function (result) {
                console.log(result);
            }
        })
    }
</script>